import React, { useContext } from "react";
import ThemeContext from "../ThemeContext";

const VoteMain = function VoteMain(props) {
  const { supNum, oppNum } = useContext(ThemeContext);
  // 方式二：通过钩子函数
  return (
    <div>
      <p>支持人数：{supNum}</p>
      <p>反对人数：{oppNum}人</p>
    </div>
  );

  // 方式一:通过comsumer
  // return (
  //   <ThemeContext.Consumer>
  //     {(context) => {
  //       const { supNum, oppNum } = context;
  //       return (
  //         <div>
  //           <p>支持人数：{supNum}</p>
  //           <p>反对人数：{oppNum}人</p>
  //         </div>
  //       );
  //     }}
  //   </ThemeContext.Consumer>
  // );
};

export default VoteMain;
